<template>
  <div>
    <div class="weekend-title">周末去哪儿</div>
    <div class="wrapper border-bottom" v-for="item in weekendList" :key="item.id">
      <img class="wrapper-img" :src="item.imgUrl" alt="">
      <p class="wrapper-title">{{ item.title }}</p>
      <p class="wrapper-desc">{{ item.desc }}</p>
    </div>
  </div>
</template>
<script>
export default {
  home: 'HomeWeekend',
  data () {
    return {
      weekendList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/sight/source/1505/7d/df6ff468331c43.jpg_r_640x214_1f3783d0.jpg',
        title: '上海必游TOP10',
        desc: '中西合璧，现代和传统各有各的精彩'
      },
      {
        id: '0002',
        imgUrl: 'http://img1.qunarzz.com/sight/source/1603/ad/69b0fc5f48ad5f.jpg_r_640x214_b0fd5c7b.jpg',
        title: '亲子时光TOP10',
        desc: '走进自然或玩转乐园，感知大千世界'
      },
      {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/sight/source/1511/1d/fe098e8cfec117.jpg_r_640x214_a9be292a.jpg',
        title: '上海城市观光',
        desc: '来这里寻找你所认识的上海'
      }]
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .weekend-title
    line-height .8rem
    text-indent .26rem
    background #eee
    color #212121
  .wrapper
    height 4rem
    margin-top .1rem
    .wrapper-img
      height 2.78rem
    .wrapper-title
      padding .2rem
      font-size .28rem
      color #212121
      ellipsis()
    .wrapper-desc
      margin-left .2rem
      font-size .24rem
      color #212121
      ellipsis()
</style>
